<template>
    <div>
        <div class="top">
            <div class="project" @click="change1">
                <div :class="['title',isShow1?'blue':'']">项目展示</div>
                <div :class="['english',isShow1?'bluee':'']">Project display</div>
            </div>
            <div class="news" @click="chenge2">
                <div :class="['title',isShow2?'blue':'']">新闻动态</div>
                <div :class="['english',isShow2?'bluee':'']">News information</div>
            </div>
        </div>
        <div class="bottom">
            <div class="project-show" v-show="isShow1">
                    <div class="show-box" v-for="(item,index) in projectList" :key="index">
                        <router-link :to="{path:'/labdetail',query:{id:item.id,type:0}}">
                            <div class="img-box">
                                <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt="">
                            </div>
                        <div class="text-box">
                            <h3>{{item.name}}</h3>
                            <p>{{item.descri}}</p>
                        </div>
                        </router-link>
                    </div>
            </div>
            <div class="news-show" v-show="isShow2">
                <div class="show-box" v-for="(item,index) in newsList" :key="index">
                    <router-link :to="{path:'/labdetail',query:{id:item.id,type:1}}">
                    <div class="img-box">
                        <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt="">
                    </div>
                    <div class="text-box">
                        <h3>{{item.name}}</h3>
                        <p>{{item.descri}}</p>
                    </div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getLaboratoryList, getLaboratoryNews} from "../../../api";

    export default {
        name: "projectsShow",
        data(){
            return{
                projectList:[],//项目展示数据列表
                newsList:[],//新闻展示数据列表
                isShow1:true,//项目展示与新闻展示的切换
                isShow2:false,//项目展示与新闻展示的切换
            }
        },
        methods:{
            change1(){
                this.isShow1=true;
                this.isShow2=false;
            },
            chenge2(){
                this.isShow1=false;
                this.isShow2=true;
            }
        },
        created() {
            //项目展示
            getLaboratoryList().then(res=>{
                console.log(res);
                this.projectList=res.rows;
            })
            // 新闻展示
            getLaboratoryNews().then(res=>{
                console.log(res);
                this.newsList=res.rows;
            })
        },
    }
</script>

<style scoped lang="less">
    .blue {
        color: #71cfff;;
    }
    .bluee {
        color: rgba(113,207,255,.6) !important;
    }
.top {
    margin: 0 auto;
    width: 50%;
    display: flex;
    justify-content: space-around;
    height: 200px;
    align-items: center;
    .project,
    .news {
        cursor: pointer;
        font-size: 22px;
        text-align: center;
        .title{

        }
        .english {
            color: rgba(0,0,0,.6);
            height: 50px;
            line-height: 50px;
        }
    }
}
    .bottom {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        width: 1170px;
        min-height: 100px;
        .project-show,
        .news-show {
            margin-left: -10px;
            margin-right: -10px;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            .show-box {
                display: block;
                min-height: 1px;
                padding-left: 10px;
                padding-right: 10px;
                cursor: pointer;
                margin-bottom: 20px;
                width: 25%;
                .img-box {
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 176px;
                        transition: .5s;
                    }
                    img:hover{
                        transform: scale(1.1, 1.1);
                    }
                }
                .text-box{
                    padding-bottom: 20px;
                    h3 {
                        padding: 10px 10px;
                        font-size: 16px;
                        color: black;
                    }
                    h3:hover{
                        text-decoration: underline;
                    }
                    p {
                        font-size: 13px;
                        line-height: 20px;
                        padding: 0 10px;
                        color: #666;
                        letter-spacing: 1px;
                        text-align: left;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-line-clamp: 3;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        margin: 10px 0;
                    }
                }
            }
            .show-box:hover{
                .text-box{box-shadow: 0 0 5px #ccc;}
            }
        }
    }
</style>